<template>
  <LeftComp v-if="HomeService.cityLeftIsExpand.value" />
  <MiddleTop />
  <RightComp v-if="HomeService.cityRightIsExpand.value" />

  <div
    @click="changeLeftStatus"
    :class="[HomeService.cityLeftIsExpand.value ? 'left-contract' : 'left-expand', 'left-btn']"
  ></div>
  <div
    @click="changeRightStatus"
    :class="[HomeService.cityRightIsExpand.value ? 'right-contract' : 'right-expand', 'right-btn']"
  ></div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import MiddleTop from './middleTop/index.vue';
import LeftComp from './leftComp/index.vue';
import RightComp from './rightComp/index.vue';
import { HomeService } from '@/views/home/homeService';

function changeLeftStatus() {
  HomeService.cityLeftIsExpand.value = !HomeService.cityLeftIsExpand.value;
}

function changeRightStatus() {
  HomeService.cityRightIsExpand.value = !HomeService.cityRightIsExpand.value;
}

defineComponent({ name: 'TsgzCityIndex' });
</script>

<style scoped lang="scss">
.right-btn {
  @apply w-[42px] h-[84px] absolute top-[370px] right-[1220px] -translate-y-1/2 cursor-pointer;
}

.right-contract {
  background: url('./assets/right-contract.png') no-repeat center;
}

.right-expand {
  @apply right-[85px];
  background: url('./assets/right-expand.png') no-repeat center;
}

.left-btn {
  @apply w-[42px] h-[84px] absolute top-[370px] left-[1220px] -translate-y-1/2 cursor-pointer;
}

.left-contract {
  background: url('./assets/left-contract.png') no-repeat center;
}

.left-expand {
  @apply left-[85px];
  background: url('./assets/left-expand.png') no-repeat center;
}
</style>
